<template>
  <div class="admins">
    <div class="cards">
      <el-form class="mb-[-16px]" :model="formData" inline>
        <el-form-item label="物料信息">
          <el-input
            v-model="formData.title"
            @keyup.enter="resetPage"
            class="w-40"
            size="small"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="物料编码">
					<el-input v-model="formData.no" @keyup.enter="resetPage"  class="w-40" size="small"  clearable/>
				</el-form-item> -->
        <el-form-item label="分类">
          <el-tree-select
            class="w-40"
            @keyup.enter="resetPage"
            default-expand-all
            :check-strictly="true"
            v-model="formData.cate_id"
            :data="options.jobss"
            :props="{ value: 'id', label: 'name' }"
            size="small"
            clearable
          >
          </el-tree-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage" size="small"
            >查询</el-button
          >
          <el-button @click="resetParams" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 10px"></div>
    <el-card v-loading="pager.loading" class="!border-none" shadow="never">
      <el-button
        type="primary"
        @click="onAdd"
        v-if="popupTitle == 10 || typeing == '入库单'"
        size="small"
      >
        <template #icon>
          <icon name="el-icon-Plus" />
        </template>
        新增物料
      </el-button>
      <div class="mt-4">
        <mtable
          :data="pager.lists"
          ref="tableref"
          :type="typeTable"
          :list="options.tableTile"
          :bill="false"
          :selection="true"
          :operation="false"
          :tableheight="popupTitle == 10 || typeing == '入库单' ? '380' : '400'"
          @handleAdds="handleAdds"
          @onSelectionchanges="onSelectionchanges"
          @rowClickFunc="rowClickFunc"
        >
          <template #tool="{ item }">
            <el-table-column
              v-if="item.display == 1"
              sortable
              :label="item.name"
              show-overflow-tooltip
              :prop="item.value"
              :width="item.width"
            >
              <template #default="{ row }">
                <div v-if="item.name == '库存数量'">
                  <span v-if="row.category_id == 15">
                    {{ row.quantity_num }}{{ row.unit_name_15 }}
                  </span>
                  <span v-else>
                    {{ row.quantity_num }}{{ row.unit_name }}
                  </span>
                </div>
                <template v-if="item.name == '名称' && popupTitle == 20">
                  <el-button @click="onHovertitle(row)" size="small">{{
                    row.title
                  }}</el-button>
                </template>
                <div v-if="item.name == '从属设备'">
                  <el-button
                    @click="onHovertitles(row)"
                    v-if="row.slave_name"
                    size="small"
                  >
                    {{ row.slave_name }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </template>
        </mtable>
      </div>
      <div class="flex mt-4 justify-end">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
  </div>
  <div style="display: flex; justify-content: end; padding: 10px 0px 0 0">
    <el-button @click="onCancel">取消</el-button>
    <el-button type="primary" @click="onsumTable">确认</el-button>
  </div>
  <tableHover
    v-if="Hovertitles"
    ref="HovertitleRefs"
    @success="getLists"
    @close="Hovertitles = false"
  ></tableHover>
  <EdittablePopup
    v-if="showTable"
    ref="editRefs"
    :type="typeTable"
    @success="getOptions"
    @close="showTable = false"
  />
  <edit-popup
    v-if="showEdit"
    ref="editRef"
    @success="getLists"
    @close="showEdit = false"
  />
  <tableHovertitle
    v-if="Hovertitle"
    ref="HovertitleRef"
    @success="getLists"
    @close="Hovertitle = false"
  >
  </tableHovertitle>
</template>

<script lang="ts" setup>
import tableHovertitle from "@/components/table-hovertitles/index.vue";
import { adminLists } from "@/api/materials/product";
import mtable from "@/components/table/index.vue";
// import { adminListss } from "@/api/inventory/list";
import { inventoryHistoryList as adminListss } from "@/api/inventoryHistory/list";
import { usePaging } from "@/hooks/usePaging";
import feedback from "@/utils/feedback";
import { adminListssmaterials } from "@/api/materials/list";
import { getCommonFieldDisplay } from "@/api/tools/code";
import EditPopup from "../../materials/list/edit.vue";
import tableHover from "@/components/table-hovers/index.vue";
import useAppStore from "@/stores/modules/inventory";
import EdittablePopup from "@/components/settable/index.vue";
const tableref = shallowRef<InstanceType<typeof EditPopup>>();
const userStore = useAppStore();
const HovertitleRefs = shallowRef<InstanceType<typeof EditPopup>>();
const warehouse_id = computed(() => userStore.warehouse_id);
const tableList = computed(() => userStore.tableList);
const popupTitle = computed(() => userStore.popupTitle);
const typeing = computed(() => userStore.typeing);
const emit = defineEmits(["onCancel", "onsumTable"]);
const Hovertitles = ref(false);
const editRefs = shallowRef<InstanceType<typeof EdittablePopup>>();
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const showTable = ref(false);
const showEdit = ref(false);
// 表单数据
const formData = reactive({
  title: "",
  no: "",
  cate_id: "",
  is_order: 1,
  warehouse_id: warehouse_id,
  filter_ids: [],
});
watch(tableList, newValue => {
  formData.filter_ids = [];
});
const dataList = ref({});
const onCancel = () => {
  emit("onCancel");
};
const Hovertitle = ref(false);
const HovertitleRef = ref();
const onHovertitle = async (data: any) => {
  Hovertitle.value = true;
  await nextTick();
  HovertitleRef.value?.open("edit");
  HovertitleRef.value?.setFormData(data);
};
const onAdd = async () => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};
const handleAdds = async () => {
  showTable.value = true;
  await nextTick();
  editRefs.value?.open("add");
};
const onHovertitles = async (data: any) => {
  Hovertitles.value = true;
  await nextTick();
  HovertitleRefs.value?.open("edit");
  HovertitleRefs.value?.setFormData(data);
};
const onsumTable = async () => {
  if (JSON.stringify(dataList.value) === "{}") {
    feedback.confirm("请选择商品");
  } else {
    emit("onsumTable", dataList.value);
  }
};
const rowClickFunc = async (row: any, ref: any) => {
  // tableref.value.toggleRowSelection(row)
  ref.toggleRowSelection(row);
};
const types = () => {
  if (typeing.value == "入库单") {
    return adminLists;
  } else {
    if (popupTitle.value == "20") {
      return adminListss;
    } else {
      return adminLists;
    }
  }
};
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: types(),
  params: formData,
});
const typeTable = ref("add_inventory_10_product");
const options = reactive({
  jobss: [] as any[],
  tableTile: [] as any[],
});
const onSelectionchanges = (val: any) => {
  dataList.value = val;
};
watch(
  () => pager.lists,
  (newValue, oldValue) => {
    for (let i = 0; i < newValue.length; i++) {
      for (let j = 0; j < newValue[i].cate_name.length; j++) {
        if (newValue[i].cate_name[j].id == newValue[i].category_id) {
          newValue[i].cate_names = newValue[i].cate_name[j].name;
        }
      }
    }
  },
  {
    deep: true,
  }
);
const onSetType = () => {
  if (popupTitle.value == 10) {
    typeTable.value = "add_inventory_10_product";
  } else if (popupTitle.value == 20) {
    if (typeing.value == "入库单") {
      typeTable.value = "add_inventory_10_product";
    } else {
      typeTable.value = "add_inventory_20_product";
    }
  }
};
const getOptions = () => {
  getCommonFieldDisplay({
    type: typeTable.value,
  }).then((data: any) => {
    options.tableTile = data;
  });
  adminListssmaterials({}).then((data: any) => {
    options.jobss = data;
  });
};

const ss = (newValue: any) => {
  if (newValue[0].cate_name) {
    newValue.find((val: any) => {
      if (val.cate_name) {
        if (val.cate_name[0].id == 4) {
          formData.filter_ids.push(val.id);
        }
      }
    });
  }
};

onMounted(() => {
  ss(tableList.value);
  onSetType();
  getLists();
  getOptions();
});
</script>
<style scoped lang="scss">
.cards {
  padding: 0 20px 0 20px;
}
</style>
